<template>
	<view class="Withdrawal">
		<view class="w_box">
			<view class="title">
				提现金额
			</view>
		</view>

		<view class="ex_box">
			<view class="input_box">
				<text>￥</text>
				<u--input color="#EC5050" fontSize="50rpx" type="number" clearable border="none" placeholder="请输入提现金额"
					v-model="value"></u--input>
				<text @click="value = about.balance" class="red">全部提现</text>
			</view>

			<view class="fee">
				<text>可提现余额：￥{{about.balance}}</text>
				<text>提现手续费：{{about.poundage}}%</text>
			</view>
		</view>

		<view class="title">
			提现到:
		</view>

		<view class="card_box">
			<view v-for="(item,index) in banklist" @click="tabs(item.id)" class="card_item">
				<view class="card">
					<image :src="item.bankIconLink" mode=""></image>
					<view class="name">
						{{item.bankName}}
					</view>
					<view class="card_num">
						{{replaceStr(item.cardNumber)}}
					</view>
				</view>
				<view class="cho_box">
					<image v-if="id==item.id" src="../../static/tabsIcon/co1.png" mode=""></image>
					<image v-else src="../../static/tabsIcon/co2.png" mode=""></image>
				</view>
			</view>
			<view @click="goadd" class="add_card">
				<image src="../../static/tabsIcon/add.png" mode=""></image>
				<view class="add">
					点击添加银行
				</view>
			</view>
		</view>
		<view class="login_Box_protocol_contract">
			<!-- <view v-if="protocolMode" class="login_Box_protocol_contract_mack">
				阅读同意后再登陆哦
				<view class="login_Box_protocol_contract_mack_arrow"></view>
			</view> -->
			<view @click="contract = !contract" class="login_Box_protocol_contract_left">
				<view v-show="contract" class="login_Box_protocol_contract_left_bar">
				</view>
			</view>
			<view class="login_Box_protocol_contract_right">
				我自愿并同意 <text @click="protocolModet = true" class="xieyi">《零工经济合作伙伴协议》</text>
			</view>
		</view>
		<view class="button_box">
			<button :disabled="!contract" @click="withdrawal" class="button">
				立即提现
			</button>
		</view>

		<u-modal closeOnClickOverlay :showCancelButton="false" :showConfirmButton="false" @close="protocolModet = false"
			@cancel="protocolModet = false" @confirm="protocolModet=false" :show="protocolModet" title="零工经济合作伙伴协议">
			<view>
				<scroll-view style="height: 50vh;" scroll-y="true">
					<xieyi></xieyi>
				</scroll-view>
				<view style="padding: 0;margin-top:25px;" class="button_box">
					<button @click="contract = true;protocolModet = false" class="button">
						立即提现
					</button>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		withdrawalabout,
		withdrawal
	} from '@/api/mine'
	import xieyi from './xieyi.vue'
	export default {
		data() {
			return {
				value: "",
				act: 0,
				id: "",
				fee: "",
				contract: false,
				protocolModet: false,
				about: [],
				banklist: [],
				max: "",
				min: "",
			}
		},
		onShow() {
			this.withdrawalabout();
		},
		components: {
			xieyi
		},
		methods: {

			// 空格
			replaceStr(str) {
				return str.replace(/(.{4})/g, '$1    ');
			},
			tabs(id) {
				this.id = id
			},
			withdrawal() {
				if (!this.value) {
					uni.showToast({
						icon: 'none',
						title: '请输入提现金额'
					})
					return
				}
				if (this.about.bankCardList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '没有可提现的银行卡!'
					})
					return
				}
				if (this.value - 0 > this.about.balance - 0) {
					uni.showToast({
						icon: 'none',
						title: '余额不足!'
					})
					return
				}
				if (this.value - 0 > this.max - 0) {
					uni.showToast({
						icon: 'none',
						title: '最大提现额度为' + this.max + '元'
					})
					return
				}
				if (this.value - 0 < this.min - 0) {
					console.log(this.value, this.min)
					uni.showToast({
						icon: 'none',
						title: '最小提现额度为' + this.min + '元'
					})
					return
				}

				let data = {
					bankId: this.id,
					withdrawalMoney: this.value,
					poundage: this.fee
				}
				withdrawal(data).then(res => {
					if (res.success == 1) {
						uni.navigateTo({
							url: "Withdrawalfinish"
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			withdrawalabout() {
				withdrawalabout().then(res => {
					if (res.success == 1) {
						this.about = res.data;
						this.max = res.data.maxSysConfig.data;
						this.min = res.data.minSysConfig.data;
						this.fee = res.data.poundage;
						if (res.data.bankCardList.length > 0) {
							this.banklist = res.data.bankCardList;
							this.id = res.data.bankCardList[0].id;
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			goadd() {
				uni.navigateTo({
					url: "./addcard"
				})
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "./WithdrawalList"
			})
		}
	}
</script>
<style>
	page {
		background: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.Withdrawal {
		padding: 40rpx;
	}

	.title {
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}


	.ex_box {
		.input_box {
			display: flex;
			align-items: flex-end;
			padding: 20rpx 0;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);

			.in {
				color: #EC5050;
				font-size: 60rpx;
			}

			text {
				color: #333333;
				font-size: 30rpx;
				margin-right: 20rpx;
			}

			.red {
				margin: 0;
				color: #EC5050;
			}
		}

		.fee {
			color: #999999;
			font-size: 26rpx;
			margin: 20rpx 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.card_box {
		margin: 30rpx 0;

		.card_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.card {
				background-image: url(../../static/tabsIcon/otherbg.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 90%;
				height: 200rpx;
				padding: 20rpx;
				color: #FFFFFF;
				margin-right: 10rpx;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.name {
					margin-bottom: 10rpx;
				}

				.card_num {
					font-size: 30rpx;
				}
			}

			.cho_box {
				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.add_card {
		background: rgba(0, 0, 0, 0.15);
		border-radius: 10px;
		display: flex;
		align-items: center;
		padding: 30rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 40rpx;
		}

		.add {
			color: rgba(0, 0, 0, 0.8);
			font-size: 32rpx;
		}
	}

	.button_box {
		text-align: center;
		padding-bottom: 80rpx;

		.button {
			font-size: 30rpx;
			display: inline-block;
			background: #FC6758;
			border-radius: 20px;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFDEF;

			&::after {
				display: none;
			}

			&[disabled] {
				background-color: #DDDDDD;
			}
		}

	}


	.login_Box_protocol_contract {
		margin-top: 20upx;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 20upx;

		.login_Box_protocol_contract_mack {
			position: absolute;
			bottom: -16upx;
			transform: translateY(100%);
			left: -30upx;
			padding: 20upx 30upx;
			border-radius: 20upx;
			background-color: rgba(0, 0, 0, 0.61);
			font-size: 34upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333;
			line-height: 44upx;

			.login_Box_protocol_contract_mack_arrow {
				position: absolute;
				border: 10upx solid rgba(0, 0, 0, 0.61);
				top: 0;
				transform: translateY(-100%);
				left: 30upx;
				border-top-color: rgba(0, 0, 0, 0);
				border-left-color: rgba(0, 0, 0, 0);
				border-right-color: rgba(0, 0, 0, 0);
			}
		}

		.login_Box_protocol_contract_left {
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2upx solid #333;
			border-radius: 100%;
			width: 28upx;
			height: 28upx;
			position: relative;

			.login_Box_protocol_contract_left_bar {
				width: 16upx;
				height: 16upx;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50% , -50%);
				background-color: #FF731E;
				border-radius: 100%;
			}
		}

		.login_Box_protocol_contract_right {
			margin-left: 18upx;
			width: calc(100% - 18upx - 28upx - 2upx);
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333;
			line-height: 34upx;
		}
	}

	.xieyi {
		color: #1467FF;
	}
</style>
